<template>
    <div>
        <el-card class="box-card" shadow="never">
            <el-page-header @back="back" :content="content">
            </el-page-header>
            <el-form ref="form" class="edit-el-form"  :model="form" label-width="auto">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input type="textarea" :rows="3" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="images">
                    <el-image v-for="(v,i) in form.images"
                          style="width: 200px;"
                          :key="i"
                          :src="v"></el-image>
                </el-form-item>
                <el-form-item label="是否实名" prop="if_realname">
                   <el-switch
                     v-model="form.if_realname"
                     active-value='1'
                     inactive-value='0'
                     active-color="#13ce66">
                   </el-switch>
                </el-form-item>
                <el-form-item label="姓名" prop="realname">
                   <el-input v-model="form.realname"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="contact_tel">
                   <el-input v-model="form.contact_tel"></el-input>
                </el-form-item>
                <el-form-item label="是否与当事人沟通" prop="if_connected">
                   <el-switch
                     v-model="form.if_connected"
                     active-value='1'
                     inactive-value='0'
                     active-color="#13ce66">
                   </el-switch>
                </el-form-item>
                <el-form-item label="当前位置">
                    <VMapShow :show_tools="show_tools" :amap_markers="amap_markers" :amap_center="amap_center"></VMapShow>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import VMapShow from '../layout/VMapShow.vue';
    export default {
        name:'RandomPictureDetail',
        components:{ VMapShow },
        data() {
            return {
                form: {
                    title: '',
                    content:'',
                    images:'',
                    if_realname:'1',
                    realname: '',
                    contact_tel:'',
                    if_connected:'1',
                },
                amap_markers:[],
                amap_center:[123.287682,44.124004],
                content:'随手拍详情',
                showMap:true,
                show_tools:false   //不展示工具栏 搜索等
            }
        },
        methods: {
            back(){
                this.$router.go(-1);
            }
        },
        created(){
            if(this.id!=-1){
                var send_data={
                    api_token:this.$store.getters.getSessionId,
                    id:this.id
                }
                this.$store.dispatch('loadRandomPictureInfo',send_data);
            }
        },
        computed:{
            editRandomPictureStatus(){
                return this.$store.getters.getEditRandomPictureStatus;
            },
            randompictureinfo(){
                return this.$store.getters.getRandomPictureInfo;
            },
            id(){
                return this.$route.params.id;
            },
        },
        watch:{
            //加载到数据之后
            randompictureinfo(val){
              this.form.title=val.title;
              this.form.content=val.content;
              this.form.images=val.images_list;
              this.form.if_realname=val.if_realname.toString();
              this.form.realname=val.realname;
              this.form.contact_tel=val.contact_tel;
              this.form.if_connected=val.if_connected.toString();
              //生成地图坐标
              let markers=[];
              if(val.current_x_coordinate>0 && val.current_y_coordinate>0){
                  markers.push({
                      position:[val.current_x_coordinate,val.current_y_coordinate],
                      content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 50px; width: 50px; border: 1px solid hsl(180, 100%, 40%); border-radius: 50px; box-shadow: hsl(180, 100%, 50%) 0px 0px 2px;display:table;"><span style="font-size:1px;display:table-cell;vertical-align:middle;">'+val.address+'</span></div>',
                  });
                  this.amap_markers=markers;
              }

            }
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
